<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        span{
            color: red;
        }
        .box1{
            font-weight: bold;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <!-- 
        标签的语义化：
            什么样的标签做什么样的事，如img标签表示图片，h1标签表示大标题，p标签表示段落....
            不同的标签有，不同的含义，就是语义。但是html中有两个标签是没有任何语义的。
            但在网页开发中，使用的最多的，这两个标签，就是div和span。

        div是男标签，特点：独占一行。
        span标签是女标签，特点：并排显示。

        div+css:
            div可以把网页分成多块，配合CSS就可以完成布局。
     -->

     <h1>我是一个h1标签</h1>
     <div class="box1">我是一个孤独的DIV</div>
     <div class="box2">我是一个孤独的DIV</div>
     <div class="box3">我是一个孤独的DIV</div>

     <!-- 一个文本，加不加span，在网页上显示的效果是一样的  -->
     <!-- 如果加上span，可以选中这个文本，给这个文本添加样式 -->
     <span>我是一个小span</span><span>我是一个小span</span><span>我是一个小span</span>
     <hr>
     我是一个小span我是一个小span我是一个小span

     <!-- 
        如果没有div和span，我们也可以开发页面。

        如果没有其它标签，只有div和span，配合css，也可以开发页面。
      -->
</body>
</html>